<template>
	<view style="height: 100%; width: 100%;">
		<!-- 新闻分类列表 -->
		<uni-segmented-control :current="current" :values="items" @clickItem="clickTab" styleType="text" activeColor="#EE1A19"></uni-segmented-control>
		<!-- 新闻列表 -->
		<view class="news_view" >
			<swiper :current="current" style="height: 100%;" circular="true" @change="swiperChange">
				<!-- 根据新闻分类循环生成swiper-item -->
				<swiper-item v-for="t in newsType">
					<view>
						<!-- 新闻列表组件 -->
						<news_list :tid="t.id"></news_list>
					</view>
				</swiper-item>
				
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				current: 0,
				//新闻分类列表
				newsType: []
			}
		},
		onLoad() {
			this.queryAllNewsType();
		},
		methods: {
			swiperChange(p){
				console.log(p);
				this.current = p.detail.current;
			},
			clickTab(p){
				console.log(p);
				this.current = p.currentIndex;
			},
			//1、有几个参数
			//2、方法应该返回什么东西？
			//3、这个方法什么时候执行
			//查询所有的新闻分类
			queryAllNewsType(){
				//查询新闻分类
				this.$.ajax({
					url: "/newsType/list",
					success: (result) => {
						console.log("新闻列表：", result);
						this.newsType = result;
						
						//循环新闻分类列表，获取其中的tname加入到items里面
						this.newsType.forEach((type) => {
							this.items.push(type.tname)
						})
					}
				});
			}
		}
	}
</script>

<style>
	.news_view {
		width: 100%;
		height: 100%;
		background-color: #ECF0F3;
	}
	
	swiper-item {
		width: 100%;
		height: 100%;
		background-color: #ECF0F3;
	}
	
	swiper-item view {
		width: 100%;
		height: 100%;
	}
</style>
